window.onload = function(){


	

	min = {

		ajaxJsonp:function(obj,call){

   			$.ajax({

 				type:'get',
			  	url:'http://od.qumei.com:5000/appApi.php',
			  	data:obj,
			  	dataType:'jsonp',
			  	jsonp: 'fun',
			  	jsonCallback:'fun',
			  	success:function(json){

			  		call(json)

			  	},
			  	erro:function(err){
			  		call(err)

			  	} 	  	 				
   			})
   		},

   		getMingxi:function(){  //初始化设置

   			var self = this

   			self.showLoad()

   			self.setFiled()

   			this.ajaxJsonp({type:9,limit:12,offset:0},function(json){

   				self.setTable(json)

   				$('#eachart_mingxi').click(function(e){ e.stopPropagation()}) //阻止图表的divl默认元素
   				$('#cityEachart').click(function(e){ e.stopPropagation()}) //阻止图表的divl默认元素

   				self.pageClick()

				self.hideLoad()

				if (api){

					 api.refreshHeaderLoadDone()

				}

   			})



   		},
   		showLoad:function(){

   			$('#tip').show()
   		},

   		hideLoad:function(){

   			$('#tip').hide()  
   		},
   		setFiled:function(){

   			document.onscroll = function(e){

   			 	var t = document.documentElement.scrollTop || document.body.scrollTop; 

   			 	if(t >= 58){


   			 		$('#qudaoFiled').show()

   			 		$('#qudaoFiled').css({'position':'fixed','top':'2rem','width':'88%','left':'50%','transform':'translate(-50%)'})

   			 	}else{

   			 		$('#qudaoFiled').hide()
   			 	}

   			}  //设置显示字段
   		},
   		echartsBoxShow:function(){  //显示图表分析

   			$('#echarts-box').animate({'top':'0'},500)

   			this.echartsClick()

   		},
   		echartsBoxHide:function(){ //隐藏图表分析
   			$('#echarts-box').animate({'top':'100%'},500)
   		},
   		echartsClick:function(){  //点击隐藏图表分析

   			var self = this ;

   			$('#echarts-box').click(function(){

   				self.echartsBoxHide()
   			})
   		},
   		setTable:function(json){

   			if(json){


   					var self = this ;

   					var data = json.data;

   					if(data.length == 0){

   						alert('没有数据啦！')

   						return
   					}

   					$('#mingxi_date').html('')

	   				for(var i = 0 ; i < data.length ; i++){

	   					var count = data[i]['count']?data[i]['count']:0

	   					var zhuanDan = data[i]['zhuanDan']?data[i]['zhuanDan']:0

	   					$li=`<div class="qudaoDate" >
								<div>${data[i]['date']}</div>
								<div>${count}</div>
								<div>${zhuanDan}</div>
								<div>${Math.round(zhuanDan/count*10000)/100 + '%'}</div>
							</div>`

						$('#mingxi_date').append($li)
	   				}

	   				$('.qudaoDate').off('click')

	   				$('.qudaoDate').click(function(){


	   					var  date = $(this).text().substr(9,10)

	   					self.getEchartsData(date)

	   					self.getCity_data(date)

	   				})
	   				
			}  //渲染表格HTML
   		},

   		foscuIndex : 1  
   		,

   		pageClick:function(){

   			var self = this

   			$('.page>li:nth-child(' + (this.foscuIndex + 1) + ')').css({'backgroundColor':'orange'})

   			$('.page>li').click(function(){

   				$('.page>li').css({'backgroundColor':'transparent'})

   				$(this).css({'backgroundColor':'orange'})

   				var index = $(this).text()



   				if(index == '<'){

   					var lastIndex = $('.page>li:nth-child(2)').text()

   					var j = 1;

   					if( lastIndex == 1){

   						alert('已经到最头啦')

   						return
   					}

   					var lastIndex = parseInt(lastIndex) - 8

   					for(var i = lastIndex ; i < lastIndex + 8; i++ ){

   						$($('.page>li')[j]).text(i);

   						j++;
   					}

   				}else if(index == '>'){

   					var lastIndex = $('.page>li:nth-last-child(2)').text()

   					var j = 1;

   					var lastIndex = parseInt(lastIndex) + 1

   					for(var i = lastIndex ; i < lastIndex + 8; i++ ){

   						$($('.page>li')[j]).text(i);

   						j++;
   					}

   				}else{

	   				if(self.foscuIndex == index){

	   					alert('当前页')

	   					return
	   				}

					self.showLoad()

					self.ajaxJsonp({type:9,limit:12,offset: (index - 1) * 12},function(json){

						self.setTable(json)

						self.hideLoad()
						
   					})

				}


				self.foscuIndex = index

   			}) 

   		},
   		everyQudaoEcharts:{


			//创建一个图表实例
	    	qushiEcharts:echarts.init(document.getElementById('eachart_mingxi')),
	    	// 指定图表的配置项和数据
	    	option:{
				  // title: {
				  //     text: '十天'
				  // },
				  tooltip: {},
				  legend: {show:true,left:'10',top:'20'},
				  xAxis: {
				      data: [
								 {value:"北京"},
								 {value:"上海"},
								 {value:"天津"},
								 {value:"秦皇岛"},
								
							],

					axisLabel:{

							show:true,
							color:'rgb(180,180,180)',
							interval:0,

					}

				  },
				  yAxis: {
							splitLine:{

								show: true,
								lineStyle:{
									 color: ['rgba(255,255,255,0.4)'],
									 width: 1,
									 type: 'dashed'
								 }
							},
							axisLabel:{
								show:true,
								color:'rgb(180,180,180)'
							}
						},
				  series: [
			  		{
				      name: '提交数',
				      type: 'bar',
				      data: [15, 30, 46, 20],
					  label:{show:true,position:'top'},
					  barWidth:15,
					  showBackground:true,
					  smooth: true

				  	},{
				      name: '转单数',
				      type: 'bar',
				      data: [15, 30, 46, 20],
					  label:{show:true,position:'top'},
					  barWidth:15,
					  showBackground:true,
					  smooth: true

				  	}],
					grid:{
						show:'true',
						borderColor:'transparent',
						backgroundColor:'rgba(255,255,255,0.2)',
						bottom:'25',
						height:'75%'
					},

			},
			// 使用刚指定的配置项和数据显示图表。
			setOption:function(){



				var self = this

				this.echartsReset()


				$(window).resize(function(){

					self.echartsReset()

					
				})

				
			},

			//echartsReset
			echartsReset:function(){


				var h = $('#Echarts').height()

				var w = $('#Echarts').width()

				this.qushiEcharts.resize(

					{
						width: w,
						height: h

					}
				)

				this.qushiEcharts.setOption(this.option);

			}

   		},
   		getEchartsData:function(date){  //调取图表数据

   			var self = this

   			this.showLoad()

   			this.ajaxJsonp({type:11,date:date},function(json){

   				if(json){


   					var data = self.arrayTransp(json.data)


   					self.everyQudaoEcharts.option.xAxis.data = data['qudao']

   					self.everyQudaoEcharts.option.series[0].data = data['count']

   					self.everyQudaoEcharts.option.series[1].data = data['zhuanDan']

   					self.everyQudaoEcharts.setOption()

   					self.hideLoad()

   					self.echartsBoxShow()
   				}
   			})

   		},
   		arrayTransp:function(obj){

   			var keys = Object.keys(obj[0])

   			var tra = {}

   			for(var i =0 ; i < keys.length ; i++){

   				tra[keys[i]] = []

   				for (var j =0 ; j < obj.length ; j++){

   					tra[keys[i]].push(obj[j][keys[i]])

   				}

   			}


   			return tra

   		},
   		getCity_data:function(data){  //获取城市转单数据地理分布图表

   			var self = this

   			this.showLoad()

   			this.ajaxJsonp({type:13,date:data},function(json){

   				if(json){

   					var data = json.data

   					var serasData = as.queyCitys(data) //城市坐标系

   					console.log(serasData)

   					self.geo.option.series[0].data = serasData 

   					self.geo.mapChart.setOption(self.geo.option)

   					self.hideLoad()

   					// self.echartsBoxShow()
   				}
   			})
		},
   		geo:{
   			// https://www.cnblogs.com/hao-1234-1234/p/10954979.html
   			mapChart:echarts.init(document.getElementById('cityEachart')),
   			option:{
   				
   				title:{
   					show:true,
   					text:'客资全国分布情况',
   					textStyle:{fontSize:10},
   					top:20,
   				},
   				geo:{
   					map:'china',
   					left:'140',
   					layoutCenter: ['70%', '50%'],
					// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
					layoutSize: '80%',

   				},
   				backgroundColor: '#fff',

   				series:[

   					{
	   					name:'转单数',
	   					type:'scatter',
	   					coordinateSystem:'geo',
	   					data:[],
	   					label:{
	   						show:true,
	   						formatter:'{@[2]}'
	   					}
   					},
   				],
   				
   			},
   		},
   		
	}

	min.getMingxi()

	apiready = function(){
	    
		$('#goIndex').click(function(){

			api.openWin({

				name:'首页',
                url:'../index.html',
                animation:{type:'movein',
                           subType:'from_left'}
			})

		})

		api.setRefreshHeaderInfo({
		    loadingImg: 'widget://image/refresh.png',
		    bgColor: '#ccc',
		    textColor: '#fff',
		    textDown: '下拉刷新...',
		    textUp: '松开刷新...'
		}, function(ret, err) {
		    //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
		    //
		   

		    min.getMingxi()

		});

	}

	




}